<template>
  <div>
      <!-- 头部返回按钮 -->
      <div class="header">
        <div class="text" @click="okk">
        <i class="iconfont icon-back"></i>
        <span class="text1">
          <i class="iconfont icon-fanhui"></i>
          医院推荐
          </span>
       </div>
      </div>

      <!-- 搜索 -->
      <div class="search">
        <input
          class="input"
          type="text"
          placeholder="搜索科室、医院、医生"
        />
      </div>

      <!-- 文字 -->
      <div class="intro">
        <pre class="one">  我们承诺|专业安全</pre>
        <pre class="two">  三甲主治医生 专家团队双重审核 严密监管措施</pre>
      </div>

    <!-- 科室 -->
    <pre class="dingdan">常见科室</pre>
    <div class="icon-mydingdan">
      <div class="payment">
          <i class="iconfont icon-shuipingzuo"></i>
          <div>泌尿科</div>
      </div>

      <div class="fahuo">
          <i class="iconfont icon-shuangyuzuo"></i>
          <div>骨科</div>
      </div>

        <div class="hold">
          <i class="iconfont icon-mojiezuo"></i>
          <div>消化内科</div>
      </div>
    </div>

    <!-- 开始  -->
      <div class="icon-mydingdan">
        <div class="payment">
            <i class="iconfont icon-chunvzuo"></i>
            <div>性病科</div>
        </div>

        <div class="fahuo">
            <i class="iconfont icon-shizizuo"></i>
            <div>口腔科</div>
        </div>

          <div class="hold">
            <i class="iconfont icon-juxiezuo"></i>
            <div>耳鼻咽喉科</div>
        </div>
      </div>
    <!-- 结束 -->

     <!-- 科室 -->
    <pre class="dingdan">内科</pre>
    <div class="icon-mydingdan">
      <div class="payment">
          <i class="iconfont icon-tianhezuo"></i>
          <div>呼吸内科</div>
      </div>

      <div class="fahuo">
          <i class="iconfont icon-sheshouzuo"></i>
          <div>普通内科</div>
      </div>

        <div class="hold">
          <i class="iconfont icon-tianchengzuo"></i>
          <div>传染科</div>
      </div>
    </div>

    <!-- 开始  -->
      <div class="icon-mydingdan">
        <div class="payment">
            <i class="iconfont icon-shuangzizuo"></i>
            <div>内分泌科</div>
        </div>

        <div class="fahuo">
            <i class="iconfont icon-jinniuzuo"></i>
            <div>心血管科</div>
        </div>

          <div class="hold">
            <i class="iconfont icon-muyangzuo"></i>
            <div>神经内科</div>
        </div>
      </div>
    <!-- 结束 -->

  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  methods: {
    okk () {
      this.$router.go(-1)// 返回上一层
    }
  }
}
</script>

<style scoped>
.header {
  height: 1.5rem;
  width: 100%;
  background:rgb(255, 204, 153);;
}
.text{
  padding-top:4%;
  font-size:0.55rem;
  color:white
}
.iconfont{
  font-size: 0.55rem;
}

/* 搜索 */
.search {
  background: #fff;
  color: #fff;
}
.search .input {
  margin: 3%;
  border-radius: 90px;
  height: 1rem;
  width: 95%;
  color: rgb(0, 0, 0);
  text-align: center;
  border: 1px solid gray;
  font-size: 0.5rem;
}
/* 文字 */
.intro{
  height: 40%;
  background: rgb(245, 239, 239);
}
.intro .one{
  margin-top:2%;
  font-size: 0.42rem;
  color: rgb(240,153,0);
  font-weight: bold;
}
.intro .two{
  font-size: 0.42rem;
  color:rgb(204,204,51);
  /* font-weight: bold; */
}
/* 科室 */
.dingdan{
  margin:3%;
  font-size: 0.45rem;
  font-weight: bold;
  margin-top:5%
}
.icon-mydingdan{
  text-align: center;
  /* margin-top:2%; */
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 3%;
  padding: 5%;

}
.icon-mydingdan .payment .iconfont{
  background: rgb(253, 246, 246);
  padding: 0.4rem;
  font-size: 1rem;
  color:rgb(231, 189, 135)
}
.icon-mydingdan .fahuo .iconfont{
  background: rgb(253, 246, 246);
  padding: 0.4rem;
  font-size: 1rem;
  color:rgb(231, 189, 135)
}
.icon-mydingdan .hold .iconfont{
  background: rgb(253, 246, 246);
  padding: 0.4rem;
  font-size: 1rem;
  color:rgb(231, 189, 135)
}
.icon-mydingdan .evaluate .iconfont{
  font-size: 1rem;
  color:rgb(231, 189, 135)
}

</style>
